<template>
  <view class="container">
     <img class="img1" src="@/static/farm.jpg" alt="img1">
     <img class="img2" src="@/static/bac1.png" alt="img2">
    <view class="login-form">
      <view class="account">
         <text>用户名：</text>
      <input v-model="loginData.username" type="text" />
      </view>
      <view class="pwd">
        <text>密码：</text>
        <input v-model="loginData.password" type="password" />
      </view>
      <button class="btn_log" @click="login">登录</button>
    </view>
    <view class="register-link">
      <text @click="goToRegister">没有账号？点击注册</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loginData: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    login() {
      // 获取本地存储中的用户信息
      let users = uni.getStorageSync('users') || [];
      
      // 查找是否存在匹配的用户
      let matchedUser = users.find(user => user.username === this.loginData.username && user.password === this.loginData.password);
      
      if (matchedUser) {
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
        // 登录成功后的逻辑，比如跳转到另一个页面
        uni.navigateTo({
          url: '/pages/main/main?username=' + this.loginData.username
        });
      } else {
        uni.showToast({
          title: '用户名或密码错误',
          icon: 'none'
        });
      }
    },
    goToRegister() {
     uni.navigateTo({
        url: '/pages/register/register'
      });
    }
  }
};
</script>

<style scoped>
input {
  width: 180px;
  height: 30px; /* 设置输入框的高度 */
  margin-bottom: 5px; /* 设置输入框之间的间距 */
}
.btn_log {
  height: 43px; /* 设置按钮的高度 */
  width: 100px;
  font-size: 25px;
  margin-top: 15px;
  background-color: transparent;
  border: 3px solid black; /* 设置按钮边框为黑色加粗 */
  border-radius: 18px; /* 设置按钮圆角 */
  line-height: 43px; /* 设置按钮文本的行高与按钮高度相等，使文本垂直居中 */
}
.container {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.account,.pwd{
  display: flex;
  height:40px;
}
.img1{
z-index: 0;
position: absolute;
height: 100%;
width: 100%;
}
.img2{
  z-index: 1;
  position: absolute;
  margin-top: 40px;
}
.login-form {
  font-size: 25px;
  margin-top: 20px;
  margin-left: 30px;
  width: 50%;
  z-index: 1;
  position: absolute;
}

.register-link {
  margin-top: 35px;
  font-size: 20px;
  z-index: 1;
  position: absolute;
  color: rgb(10, 106, 5);
}
</style>
